<template>
  <div class="nav_bar">
    <el-menu :default-active="activeIndex" mode="horizontal" :router="true" @select="selectNewPath">
      <el-menu-item v-for="(nav, index) in navs" :key="index" :index="nav.path">{{nav.name}}</el-menu-item>
    </el-menu>
    <div class="search">
      <el-input @input="onInput" :value="searchVal" placeholder="请输入关键字搜索" suffix-icon="el-icon-search"></el-input>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "/statistics/project",
      navs: [
        { name: "项目", path: "/statistics/project" },
        { name: "任务", path: "/statistics/task" },
        { name: "人员", path: "/statistics/member" },
        { name: "评审", path: "/statistics/review" },
        // { name: "gantt", path: "/statistics/gantt" },
      ],
      searchVal: '',
      timer: null
    };
  },
  created() {
    this.activeIndex = this.$route.fullPath
  },
  mounted() {},
  methods: {
    onInput(str){
      this.searchVal = str
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.$emit('handleSearch', str)
      }, 300);
    },
    selectNewPath(){
      this.searchVal = ''
    },
  },
  filters: {},
  components: {},
};
</script>

<style lang="less" scope>
@import "./index.less";
</style>